<template>
  <div>
    <div
      class="menu_container black-bg color-white hover-border-active pointer flex align-center justify-center"
      ref="menuHome"
      @click="toggleMenu"
      :title="openFlag ? '关闭' : '展开'"
    >
      <i
        :class="openFlag ? 'el-icon-close' : 'el-icon-menu'"
        class="iconSize"
      ></i>
    </div>
    <div
      class="menu_item hover-active black-bg color-white hover-border-active align-center justify-center pointer"
      v-for="(item, index) in menuItems"
      :class="openFlag ? 'flex' : 'display-none'"
      :id="item.name"
      @click="clickMenu(item, index)"
      :key="index"
      :title="item.title"
    >
      <i :class="item.icon" class="iconSize"></i>
      <div
        class="absolute text-normal title-2 menu_title"
        style="bottom: -35px"
      >
        {{ item.title }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "toggleMenu",
  props: {
    position: {
      default: "LT",
    },
    width: {
      default: 42,
    },
    baseDistance: {
      default: 150,
    },
    menuBg: {
      default: "",
    },
    itemBg: {
      default: "",
    },
    menuItems: {
      type: Array,
    },
  },
  data() {
    return {
      openFlag: false,
      operators: ["+", "+"],
    };
  },
  watch: {
    $route: {
      handler: function () {
        this.openFlag = false;
      },
      deep: true,
    },
  },
  mounted() {
    this.$refs.menuHome.style.width = this.width + "px";
    this.$refs.menuHome.style.height = this.width + "px";
    this.$refs.menuHome.style.lineHeight = this.width + "px";
    this.$refs.menuHome.style.background = this.menuBg;
    this.menuItems.forEach((item) => {
      let el = document.getElementById(item.name);
      el.style.width = `${this.width * 0.92}px`;
      el.style.height = `${this.width * 0.92}px`;
      el.style.lineHeight = `${this.width * 0.92}px`;
      el.style.background = this.itemBg;
    });
    switch (this.position) {
      case "LT":
        this.$refs.menuHome.style.left = "20px";
        this.$refs.menuHome.style.top = "20px";
        this.menuItems.forEach((item) => {
          let el = document.getElementById(item.name);
          el.style.left = "26px";
          el.style.top = "26px";
        });
        this.operators = ["+", "+"];
        break;
      case "RT":
        this.$refs.menuHome.style.right = "20px";
        this.$refs.menuHome.style.top = "20px";
        this.menuItems.forEach((item) => {
          let el = document.getElementById(item.name);
          el.style.right = "26px";
          el.style.top = "26px";
        });
        this.operators = ["-", "+"];
        break;
      case "LB":
        this.$refs.menuHome.style.left = "20px";
        this.$refs.menuHome.style.bottom = "20px";
        this.menuItems.forEach((item) => {
          let el = document.getElementById(item.name);
          el.style.left = "26px";
          el.style.bottom = "26px";
        });
        this.operators = ["+", "-"];
        break;
      case "RB":
        this.$refs.menuHome.style.right = "20px";
        this.$refs.menuHome.style.bottom = "20px";
        this.menuItems.forEach((item) => {
          let el = document.getElementById(item.name);
          el.style.right = "26px";
          el.style.bottom = "26px";
        });
        this.operators = ["-", "-"];
        break;
      default:
        this.$refs.menuHome.style.left = "20px";
        this.$refs.menuHome.style.top = "20px";
        this.menuItems.forEach((item) => {
          let el = document.getElementById(item.name);
          el.style.left = "26px";
          el.style.top = "26px";
        });
        this.operators = ["+", "+"];
        break;
    }
  },
  methods: {
    toggleMenu() {
      if (!this.openFlag) {
        this.menuItems.forEach((item, index) => {
          this.toggleMenuTransition(item.name, index, false);
        });
        this.$refs.menuHome.style.transform = "rotate(360deg)";
      } else {
        this.menuItems.forEach((item, index) => {
          this.toggleMenuTransition(item.name, index, true);
        });
        this.$refs.menuHome.style.transform = "rotate(0)";
      }
      this.openFlag = !this.openFlag;
    },
    toggleMenuTransition(name, index, revert) {
      let oneArea = 90 / (this.menuItems.length - 1);
      let axisX = Math.sin(
        ((this.menuItems.length - 1 - index) * oneArea * 2 * Math.PI) / 360
      );
      let axisY = Math.cos(
        ((this.menuItems.length - 1 - index) * oneArea * 2 * Math.PI) / 360
      );
      let el = document.getElementById(name);
      let that = this;
      if (!revert) {
        setTimeout(function () {
          el.style.transitionDuration = "200ms";
          el.style.transform = `translate(${that.operators[0]}${
            that.baseDistance * axisX
          }px,${that.operators[1]}${that.baseDistance * axisY}px)`;
        }, index * 100);
      } else {
        el.style.transitionDuration = "200ms";
        el.style.transform = `translate(0,0)`;
      }
    },
    clickMenu(item, index) {
      this.$emit("clickMenu", item, index);
    },
  },
};
</script>

<style scoped lang="scss">
.menu_container {
  position: absolute;
  z-index: 9999999;
  border-radius: 50%;
  transition-duration: 400ms;
  text-align: center;
  /* border: #efefef 3px solid; */
  /* box-shadow: aliceblue 1px 1px 1px; */
}
.iconSize {
  font-size: 26px;
  //   font-weight: 600;
}
.menu_item {
  position: absolute;
  border-radius: 50%;
  z-index: 999999;
  /* border: #efefef 3px solid; */
  text-align: center;
  box-shadow: aliceblue 0px 0px 2px;
  .menu_title {
    transition: all ease 1s;
    opacity: 0;
  }
  &:hover {
    .menu_title {
      opacity: 1;
    }
  }
}
// img {
//   width: 50%;
//   transform: translate(-5%, 20%);
// }
.display-none {
  display: none;
}
.display-block {
  display: block;
}
</style>
